<template>
  <view class="my-pickup-location">
    <PickupLocationHeader @getSearchLeader="getSearchLeader" />

    <!-- 当前提货点的显示 -->
    <tm-sheet class="content">
      <!-- 如果当前有默认提货点 -->
      <block v-if="currentShop.id">
        <PickupLocationItem :shop="currentShop" />
      </block>
      <!-- 如果当前没有默认提货点 -->
      <block v-else>
        <tm-cell :margin="[0, 0]" :titleFontSize="30" rightText="暂未设置默认提货点" rightIcon="tmicon-md-pin">
          <template v-slot:title>
            <view class="flex flex-row flex-row-center-center">
              <tm-icon name="tmicon-tongzhi"></tm-icon>
              <tm-text class="ml-10">注意</tm-text>
            </view>
          </template>
        </tm-cell>
      </block>
    </tm-sheet>
    <!-- 其他提货点的显示 -->
    <scroll-view scroll-y @scrolltolower="loadMore" class="gui-sv">
      <block v-if="reactiveSearchResult.content.length > 0">
        <tm-sheet class="mb-20" v-for="item in reactiveSearchResult.content" :key="item.id">
          <PickupLocationItem
            :shop="item"
            @selectLeaderAddress="selectLeaderAddress"
            :isCurrentShop="isCurrentShop(item.leaderId)"
          ></PickupLocationItem>
        </tm-sheet>
      </block>
      <block v-else>
        <tm-result :showBtn="false" subTitle="选择搜索区域或点击搜索查找"></tm-result>
      </block>
    </scroll-view>
    <!-- 跳转到其他选择提货点页面 -->
    <tm-button block label="搜索并选择其它提货点" class="absolute b-0 fulled" @click="choosePickUpLocation"></tm-button>
  </view>
</template>

<script setup lang="ts">
import { pickupStore } from '@/store'
import { storeToRefs } from 'pinia'
import { ref, reactive, onMounted, watch } from 'vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmCell from '@/tmui/components/tm-cell/tm-cell.vue'
import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue'
import tmResult from '@/tmui/components/tm-result/tm-result.vue'
import tmButton from '../../tmui/components/tm-button/tm-button.vue'
import usePickUplocation from '@/hooks/usePickUpLocation'

const {
  reactiveSearchResult, //  定义搜索结果的初始化数据--响应式数据
  getSearchLeader, // 搜索提货点获取当前地区的经纬度
  loadMore, // 上拉加载获取更多
  selectLeaderAddress, //  选择提货点
  currentShop, // 当前提货点
  isCurrentShop, // 判断是否为当前提货点
} = usePickUplocation()

// 跳转到提货点页面
const choosePickUpLocation = () => {
  uni.navigateTo({
		url: '/pagesLocation/choosePickUpLocation/choosePickUpLocation'
	})
}
</script>

<style lang="scss">
.empty {
  width: 100%;
  height: 900rpx;
  background-color: red;
  font-size: larger;
}
.gui-sv {
	height: calc(100vh - 84rpx - 284rpx - 112rpx);
}
</style>
